<!--
/**
* Author: gaohui
* Date: 2023-02-28 15:09
* Desc: PropsComp 组件传值及事件触发
*/
-->

<template>
  <title-line title="组件传值及事件触发" />
  <text-comp ref="textCompRef" str="这是一段传入文本" @changeValue="handleChangeValue" />
  <div class="mt10 mb10">接收到的组件传出值：{{ propsValue }}</div>
  <div>
    <el-button @click.stop="handleGetValue">获取组件的值</el-button>
    <el-button @click.stop="handleExecFn">获取组件的方法并执行</el-button>
  </div>
</template>

<script name="PropsComp" lang="ts" setup>
import { ref } from "vue";
import { showMessage } from "@/utils/msgUtil";
import TextComp from "./components/TextComp.vue";

const propsValue = ref("");
const handleChangeValue = (val) => {
  propsValue.value = val;
};

// 通过模板引用访问一个元素
const textCompRef = ref();
const handleGetValue = () => {
  const str = textCompRef.value?.disposeStr || "貌似没有获取到哦~";
  showMessage(str);
};
const handleExecFn = () => {
  const fn = textCompRef.value?.disposeFn;
  fn("123");
};
</script>
<style lang="scss" scoped></style>
